    // VIM按键功能数据库
    const vimKeyData = {
    'h': {
    description: '向左移动光标一个字符',
    category: 'navigation',
    examples: ['h - 向左移动', '5h - 向左移动5个字符', 'dh - 删除左边字符'],
    advanced: '可以配合数字使用，如10h向左移动10个字符'
},
    'j': {
    description: '向下移动光标一行',
    category: 'navigation',
    examples: ['j - 向下移动', '10j - 向下移动10行', 'dj - 删除当前行和下一行'],
    advanced: '是最常用的移动命令之一，建议养成习惯'
},
    'k': {
    description: '向上移动光标一行',
    category: 'navigation',
    examples: ['k - 向上移动', '5k - 向上移动5行', 'dk - 删除当前行和上一行'],
    advanced: '与j相反方向，配合数字使用更高效'
},
    'l': {
    description: '向右移动光标一个字符',
    category: 'navigation',
    examples: ['l - 向右移动', '3l - 向右移动3个字符', 'dl - 删除当前字符'],
    advanced: '可以配合数字使用，如20l向右移动20个字符'
},
    'w': {
    description: '跳到下一个单词开头',
    category: 'navigation',
    examples: ['w - 下一个单词', '3w - 跳过3个单词', 'dw - 删除到下个单词开头'],
    advanced: '单词的边界由标点符号和空格决定'
},
    'b': {
    description: '跳到上一个单词开头',
    category: 'navigation',
    examples: ['b - 上一个单词', '2b - 回退2个单词', 'db - 删除到上个单词开头'],
    advanced: '与w相反方向，用于快速回退'
},
    'e': {
    description: '跳到当前单词结尾',
    category: 'navigation',
    examples: ['e - 当前单词结尾', '2e - 跳到第2个单词结尾', 'de - 删除到单词结尾'],
    advanced: '会停在单词的最后一个字符上'
},
    'i': {
    description: '在当前位置进入插入模式',
    category: 'mode',
    examples: ['i - 进入插入模式', 'I - 在行首插入', 'ciw - 修改当前单词'],
    advanced: '最常用的进入插入模式的方式'
},
    'a': {
    description: '在当前位置后进入插入模式',
    category: 'mode',
    examples: ['a - 在光标后插入', 'A - 在行尾插入', 'caw - 修改当前单词并插入'],
    advanced: '比i更方便，因为不需要移动光标到正确位置'
},
    'o': {
    description: '在当前行下方新建一行并进入插入模式',
    category: 'mode',
    examples: ['o - 下方新建行', 'O - 上方新建行', '3o - 下方新建3行'],
    advanced: '快速开始新行的最佳方式'
},
    'x': {
    description: '删除当前字符',
    category: 'edit',
    examples: ['x - 删除字符', '5x - 删除5个字符', 'X - 删除前一个字符'],
    advanced: '相当于dl命令'
},
    'd': {
    description: '删除操作符，配合移动命令使用',
    category: 'edit',
    examples: ['dd - 删除整行', 'dw - 删除单词', 'd$ - 删除到行尾', 'd0 - 删除到行首'],
    advanced: '最强大的删除命令，配合各种移动命令使用'
},
    'y': {
    description: '复制（yank）操作符，配合移动命令使用',
    category: 'edit',
    examples: ['yy - 复制整行', 'yw - 复制单词', 'y$ - 复制到行尾', 'y0 - 复制到行首'],
    advanced: 'VIM中使用yank表示复制'
},
    'p': {
    description: '在光标后粘贴',
    category: 'edit',
    examples: ['p - 在光标后粘贴', 'P - 在光标前粘贴', '3p - 粘贴3次', 'gp - 粘贴并移动光标'],
    advanced: '可以粘贴寄存器中的内容，如"ap'
},
    'u': {
    description: '撤销上一次操作',
    category: 'edit',
    examples: ['u - 撤销一次', '5u - 撤销5次', 'U - 撤销整行修改'],
    advanced: 'VIM的撤销功能非常强大，可以撤销很多次'
},
    'v': {
    description: '进入字符视觉模式',
    category: 'mode',
    examples: ['v - 字符选择', 'V - 行选择', 'Ctrl+v - 块选择', 'vw - 选择单词'],
    advanced: '视觉模式下可以进行选择操作'
},
    'r': {
    description: '替换当前字符',
    category: 'edit',
    examples: ['ra - 替换为a', 'r\n - 替换为换行', 'R - 进入替换模式'],
    advanced: '快速替换单个字符'
},
    'c': {
    description: '修改操作符，删除并进入插入模式',
    category: 'edit',
    examples: ['cw - 修改单词', 'cc - 修改整行', 'c$ - 修改到行尾'],
    advanced: '删除并立即进入插入模式'
},
    's': {
    description: '删除当前字符并进入插入模式',
    category: 'edit',
    examples: ['s - 删除字符并插入', '3s - 删除3字符并插入', 'S - 删除整行并插入'],
    advanced: '相当于cl命令'
},
    'J': {
    description: '合并下一行到当前行',
    category: 'edit',
    examples: ['J - 合并下一行', '3J - 合并3行', 'gJ - 合并但不加空格'],
    advanced: '自动在合并处添加空格'
},
    'q': {
    description: '录制宏（配合寄存器使用）',
    category: 'advanced',
    examples: ['qa - 录制到寄存器a', 'q - 停止录制', '@a - 播放宏'],
    advanced: 'VIM的宏功能非常强大'
},
    'Esc': {
    description: '返回普通模式',
    category: 'mode',
    examples: ['Esc - 返回普通模式', 'Ctrl+[ - 同样功能'],
    advanced: '最常用的键，建议映射到Caps Lock'
},
    ':': {
    description: '进入命令模式',
    category: 'mode',
    examples: [':w - 保存', ':q - 退出', ':wq - 保存退出'],
    advanced: 'VIM的命令模式功能极其强大'
},
    '/': {
    description: '向前搜索',
    category: 'search',
    examples: ['/pattern - 搜索', 'n - 下一个', 'N - 上一个'],
    advanced: '支持正则表达式搜索'
},
    '?': {
    description: '向后搜索',
    category: 'search',
    examples: ['?pattern - 反向搜索', 'n - 继续反向', 'N - 正向'],
    advanced: '与/相反方向搜索'
},
    'n': {
    description: '重复上一次搜索',
    category: 'search',
    examples: ['n - 重复搜索', 'N - 反向重复'],
    advanced: '搜索后快速导航'
},
    'N': {
    description: '反向重复上一次搜索',
    category: 'search',
    examples: ['N - 反向搜索', 'n - 正向搜索'],
    advanced: '快速切换搜索方向'
},
    'f': {
    description: '在当前行内向前查找字符',
    category: 'search',
    examples: ['fa - 查找a', '; - 重复', ', - 反向重复'],
    advanced: '行内快速移动'
},
    'F': {
    description: '在当前行内向后查找字符',
    category: 'search',
    examples: ['Fa - 反向查找a', '; - 重复', ', - 反向重复'],
    advanced: '与f相反方向'
},
    't': {
    description: '向前查找字符并停在前面',
    category: 'search',
    examples: ['ta - 停在a前', '; - 重复', ', - 反向重复'],
    advanced: '比f更精确的定位'
},
    'T': {
    description: '向后查找字符并停在前面',
    category: 'search',
    examples: ['Ta - 反向停在a前', '; - 重复', ', - 反向重复'],
    advanced: '与t相反方向'
},
    'gg': {
    description: '跳到文件开头',
    category: 'navigation',
    examples: ['gg - 文件开头', '5gg - 跳到第5行', ':5 - 同样功能'],
    advanced: '快速定位到文件任意位置'
},
    'G': {
    description: '跳到文件结尾',
    category: 'navigation',
    examples: ['G - 文件结尾', '15G - 跳到第15行'],
    advanced: '配合数字使用可以跳到任意行'
},
    '0': {
    description: '跳到行首',
    category: 'navigation',
    examples: ['0 - 行首', '^ - 第一个非空字符', '$ - 行尾'],
    advanced: '快速在行内移动'
},
    '^': {
    description: '跳到行首第一个非空字符',
    category: 'navigation',
    examples: ['^ - 非空行首', '0 - 绝对行首', '$ - 行尾'],
    advanced: '比0更实用的行首定位'
},
    '$': {
    description: '跳到行尾',
    category: 'navigation',
    examples: ['$ - 行尾', '0 - 行首', '^ - 非空行首'],
    advanced: '行内移动的终点'
},
    '%': {
    description: '跳到匹配的括号',
    category: 'navigation',
    examples: ['% - 匹配括号', 'd% - 删除括号内内容'],
    advanced: '编程时非常有用'
},
    '*': {
    description: '搜索当前单词',
    category: 'search',
    examples: ['* - 搜索单词', '# - 反向搜索', 'g* - 部分匹配'],
    advanced: '快速搜索光标下的单词'
},
    '#': {
    description: '反向搜索当前单词',
    category: 'search',
    examples: ['# - 反向搜索', '* - 正向搜索', 'g# - 部分匹配'],
    advanced: '与*相反方向搜索'
},
    'm': {
    description: '设置标记（配合寄存器）',
    category: 'advanced',
    examples: ['ma - 设置标记a', '`a - 跳转到标记a', "'a - 跳转到标记a的行"],
    advanced: 'VIM的标记系统非常强大'
},
    '`': {
    description: '跳转到精确标记位置',
    category: 'advanced',
    examples: ['`a - 精确位置', "'a - 行位置", "'' - 上次位置"],
    advanced: '精确跳转到标记位置'
},
    "'": {
    description: '跳转到标记行',
    category: 'advanced',
    examples: ["'a - 跳转到a的行", '`a - 精确位置', "'' - 上次跳转位置"],
    advanced: '跳转到标记所在的行'
},
    'Ctrl+r': {
    description: '重做',
    category: 'edit',
    examples: ['Ctrl+r - 重做', 'u - 撤销'],
    advanced: '与u相反的操作'
},
    'Ctrl+f': {
    description: '向下翻页',
    category: 'navigation',
    examples: ['Ctrl+f - 下翻页', 'Ctrl+b - 上翻页', 'Ctrl+d - 下半页'],
    advanced: '快速浏览大文件'
},
    'Ctrl+b': {
    description: '向上翻页',
    category: 'navigation',
    examples: ['Ctrl+b - 上翻页', 'Ctrl+f - 下翻页', 'Ctrl+u - 上半页'],
    advanced: '与Ctrl+f相反方向'
},
    'Ctrl+d': {
    description: '向下翻半页',
    category: 'navigation',
    examples: ['Ctrl+d - 下半页', 'Ctrl+u - 上半页', 'Ctrl+f - 整页'],
    advanced: '更精细的翻页控制'
},
    'Ctrl+u': {
    description: '向上翻半页',
    category: 'navigation',
    examples: ['Ctrl+u - 上半页', 'Ctrl+d - 下半页', 'Ctrl+b - 整页'],
    advanced: '与Ctrl+d相反方向'
},
    'Ctrl+w': {
    description: '窗口操作前缀',
    category: 'window',
    examples: ['Ctrl+w,s - 水平分割', 'Ctrl+w,v - 垂直分割', 'Ctrl+w,h,j,k,l - 窗口间移动'],
    advanced: 'VIM的多窗口功能'
},
    'Ctrl+o': {
    description: '跳转到旧位置',
    category: 'navigation',
    examples: ['Ctrl+o - 旧位置', 'Ctrl+i - 新位置'],
    advanced: '在跳转历史中移动'
},
    'Ctrl+i': {
    description: '跳转到新位置',
    category: 'navigation',
    examples: ['Ctrl+i - 新位置', 'Ctrl+o - 旧位置'],
    advanced: '与Ctrl+o相反方向'
},
    'Space': {
    description: '空格键（普通模式下向右移动）',
    category: 'navigation',
    examples: ['Space - 右移', 'Backspace - 左移'],
    advanced: '有些系统映射Space为:'
},
    'Enter': {
    description: '回车键（移动到下一行）',
    category: 'navigation',
    examples: ['Enter - 下一行', '+ - 同样功能', '- - 上一行'],
    advanced: '快速在行间移动'
}
};

    // 键盘布局配置
    const keyboardLayout = [
    // 第一行
    [
    {key: 'Esc', display: 'Esc', span: 1},
    {key: '1', display: '1', span: 1},
    {key: '2', display: '2', span: 1},
    {key: '3', display: '3', span: 1},
    {key: '4', display: '4', span: 1},
    {key: '5', display: '5', span: 1},
    {key: '6', display: '6', span: 1},
    {key: '7', display: '7', span: 1},
    {key: '8', display: '8', span: 1},
    {key: '9', display: '9', span: 1},
    {key: '0', display: '0', span: 1},
    {key: '-', display: '-', span: 1},
    {key: '=', display: '=', span: 1},
    {key: 'Backspace', display: '⌫', span: 2}
    ],
    // 第二行
    [
    {key: 'Tab', display: 'Tab', span: 2},
    {key: 'q', display: 'q', span: 1},
    {key: 'w', display: 'w', span: 1},
    {key: 'e', display: 'e', span: 1},
    {key: 'r', display: 'r', span: 1},
    {key: 't', display: 't', span: 1},
    {key: 'y', display: 'y', span: 1},
    {key: 'u', display: 'u', span: 1},
    {key: 'i', display: 'i', span: 1},
    {key: 'o', display: 'o', span: 1},
    {key: 'p', display: 'p', span: 1},
    {key: '[', display: '[', span: 1},
    {key: ']', display: ']', span: 1},
    {key: '\\', display: '\\', span: 1}
    ],
    // 第三行
    [
    {key: 'CapsLock', display: 'Caps', span: 2},
    {key: 'a', display: 'a', span: 1},
    {key: 's', display: 's', span: 1},
    {key: 'd', display: 'd', span: 1},
    {key: 'f', display: 'f', span: 1},
    {key: 'g', display: 'g', span: 1},
    {key: 'h', display: 'h', span: 1},
    {key: 'j', display: 'j', span: 1},
    {key: 'k', display: 'k', span: 1},
    {key: 'l', display: 'l', span: 1},
    {key: ';', display: ';', span: 1},
    {key: "'", display: "'", span: 1},
    {key: 'Enter', display: '↵', span: 2}
    ],
    // 第四行
    [
    {key: 'Shift', display: '⇧', span: 3},
    {key: 'z', display: 'z', span: 1},
    {key: 'x', display: 'x', span: 1},
    {key: 'c', display: 'c', span: 1},
    {key: 'v', display: 'v', span: 1},
    {key: 'b', display: 'b', span: 1},
    {key: 'n', display: 'n', span: 1},
    {key: 'm', display: 'm', span: 1},
    {key: ',', display: ',', span: 1},
    {key: '.', display: '.', span: 1},
    {key: '/', display: '/', span: 1},
    {key: 'Shift', display: '⇧', span: 3}
    ],
    // 第五行
    [
    {key: 'Ctrl', display: 'Ctrl', span: 5},
    {key: 'Alt', display: 'Alt', span: 2},
    {key: 'Space', display: 'Space', span: 3},
    {key: 'Alt', display: 'Alt', span: 2},
    {key: 'Ctrl', display: 'Ctrl', span: 3}
    ]
    ];

    // 全局变量
    let operationHistory = [];
    let soundEnabled = true;
    let practiceMode = false;
    let currentTooltip = null;

    // 音效函数
    function playSound(type = 'click') {
    if (!soundEnabled) return;

    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();

    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    switch(type) {
    case 'click':
    oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
    oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
    break;
    case 'success':
    oscillator.frequency.setValueAtTime(600, audioContext.currentTime);
    oscillator.frequency.setValueAtTime(800, audioContext.currentTime + 0.1);
    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.2);
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
    break;
    case 'error':
    oscillator.frequency.setValueAtTime(300, audioContext.currentTime);
    oscillator.frequency.setValueAtTime(200, audioContext.currentTime + 0.1);
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
    break;
}

    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.3);
}

    // 创建键盘布局
    function createKeyboard() {
    const keyboard = document.getElementById('keyboard');
    keyboard.innerHTML = '';

    keyboardLayout.forEach(row => {
    row.forEach(keyConfig => {
    const keyElement = document.createElement('div');
    keyElement.className = 'key';
    keyElement.style.gridColumn = `span ${keyConfig.span}`;
    keyElement.textContent = keyConfig.display;
    keyElement.dataset.key = keyConfig.key;

    // 添加特殊样式
    if (['h', 'j', 'k', 'l', 'w', 'b', 'e'].includes(keyConfig.key)) {
    keyElement.classList.add('key-highlight');
}

    // 添加事件监听器
    keyElement.addEventListener('click', () => andleKeyClick(keyConfig.key, keyElement));
    keyElement.addEventListener('mouseenter', (e) => showTooltip(e, keyConfig.key));
    keyElement.addEventListener('mouseleave', hideTooltip);

    keyboard.appendChild(keyElement);
});
});
}

    // 处理按键点击
    function handleKeyClick(key, element) {
    playSound('click');

    // 移除之前的激活状态
    document.querySelectorAll('.key-active').forEach(el => el.classList.remove('key-active'));

    // 添加激活状态
    element.classList.add('key-active');

    // 显示详情
    showKeyDetail(key);

    // 添加到历史
    addToHistory(key);

    // 练习模式检查
    if (practiceMode) {
    checkPracticeMode(key);
}

    // 3秒后移除激活状态
    setTimeout(() => {
    element.classList.remove('key-active');
}, 3000);
}

    // 显示提示框
    function showTooltip(event, key) {
    const data = vimKeyData[key];
    if (!data) return;

    hideTooltip();

    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.innerHTML = `
                <strong>${key}</strong>: ${data.description}
                <br><small>点击查看详情</small>
            `;

    document.body.appendChild(tooltip);

    const rect = event.target.getBoundingClientRect();
    tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
    tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';

    currentTooltip = tooltip;
}

    // 隐藏提示框
    function hideTooltip() {
    if (currentTooltip) {
    currentTooltip.remove();
    currentTooltip = null;
}
}

    // 显示按键详情
    function showKeyDetail(key) {
    const data = vimKeyData[key];
    const detailPanel = document.getElementById('detailPanel');
    const keyDisplay = document.getElementById('keyDisplay');
    const keyDescription = document.getElementById('keyDescription');
    const keyExamples = document.getElementById('keyExamples');
    const examplesList = document.getElementById('examplesList');

    if (!data) {
    keyDisplay.textContent = key;
    keyDescription.textContent = '该按键在VIM中没有特殊功能。';
    keyExamples.style.display = 'none';
    detailPanel.style.display = 'block';
    return;
}

    keyDisplay.textContent = key;
    keyDescription.textContent = data.description;

    // 显示示例
    examplesList.innerHTML = '';
    data.examples.forEach(example => {
    const li = document.createElement('li');
    li.textContent = example;
    examplesList.appendChild(li);
});

    if (data.advanced) {
    const li = document.createElement('li');
    li.innerHTML = `<strong>高级技巧:</strong> ${data.advanced}`;
    li.style.color = '#5eead4';
    li.style.marginTop = '8px';
    examplesList.appendChild(li);
}

    keyExamples.style.display = 'block';
    detailPanel.style.display = 'block';

    // 自动隐藏详情面板
    setTimeout(() => {
    detailPanel.style.display = 'none';
}, 10000);
}

    // 添加到历史记录
    function addToHistory(key) {
    const data = vimKeyData[key];
    if (!data) return;

    const historyItem = {
    key: key,
    description: data.description,
    timestamp: new Date().toLocaleTimeString()
};

    operationHistory.unshift(historyItem);
    if (operationHistory.length > 10) {
    operationHistory.pop();
}

    updateHistoryDisplay();
}

    // 更新历史显示
    function updateHistoryDisplay() {
    const historyList = document.getElementById('historyList');
    historyList.innerHTML = '';

    operationHistory.forEach((item, index) => {
    const div = document.createElement('div');
    div.className = 'history-item';
    div.innerHTML = `
                    <div class="history-key">${item.key}</div>
                    <div class="history-desc">${item.description}</div>
                    <div style="font-size: 10px; color: #64748b; margin-top: 4px;">${item.timestamp}</div>
                `;

    div.addEventListener('click', () => {
    showKeyDetail(item.key);
    playSound('click');
});

    historyList.appendChild(div);
});
}

    // 练习模式
    function checkPracticeMode(key) {
    if (!practiceMode) return;

    // 这里可以添加练习模式的逻辑
    // 例如：随机显示一个操作，让用户按正确的键
    console.log('Practice mode:', key);
}

    // 控制面板功能
    document.getElementById('toggleSound').addEventListener('click', function() {
    soundEnabled = !soundEnabled;
    this.textContent = soundEnabled ? '🔊 音效' : '🔇 静音';
    this.classList.toggle('active');
    playSound(soundEnabled ? 'success' : 'error');
});

    document.getElementById('clearHistory').addEventListener('click', function() {
    operationHistory = [];
    updateHistoryDisplay();
    playSound('success');
});

    document.getElementById('showAllKeys').addEventListener('click', function() {
    // 显示所有按键的概览
    const allKeys = Object.keys(vimKeyData);
    let overview = 'VIM按键功能概览：\n\n';

    allKeys.forEach(key => {
    const data = vimKeyData[key];
    overview += `${key}: ${data.description}\n`;
});

    alert(overview);
    playSound('success');
});

    document.getElementById('practiceMode').addEventListener('click', function() {
    practiceMode = !practiceMode;
    this.textContent = practiceMode ? '✅ 练习模式' : '🎯 练习模式';
    this.classList.toggle('active');

    if (practiceMode) {
    alert('练习模式已开启！系统会随机显示操作，请按对应的按键。');
    startPracticeMode();
}

    playSound(practiceMode ? 'success' : 'error');
});

    // 开始练习模式
    function startPracticeMode() {
    if (!practiceMode) return;

    const keys = Object.keys(vimKeyData);
    const randomKey = keys[Math.floor(Math.random() * keys.length)];
    const data = vimKeyData[randomKey];

    alert(`练习：${data.description}\n请按对应的按键：${randomKey}`);

    // 等待用户按键
    const checkKey = (event) => {
    if (event.key === randomKey || event.key.toLowerCase() === randomKey.toLowerCase()) {
    playSound('success');
    alert('正确！继续练习...');
    document.removeEventListener('keydown', checkKey);
    setTimeout(startPracticeMode, 2000);
}
};

    document.addEventListener('keydown', checkKey);
}

    // 键盘快捷键支持
    document.addEventListener('keydown', function(event) {
    const key = event.key;

    // 忽略在输入框中的按键
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
    return;
}

    // 处理特殊按键
    if (key === 'Escape') {
    document.getElementById('detailPanel').style.display = 'none';
    playSound('success');
    return;
}

    // 查找对应的按键元素
    const keyElement = document.querySelector(`[data-key="${key}"]`);
    if (keyElement) {
    handleKeyClick(key, keyElement);
    event.preventDefault();
}
});

    // 初始化
    function init() {
    createKeyboard();
    updateHistoryDisplay();

    // 显示欢迎信息
    setTimeout(() => {
    showKeyDetail('h');
    playSound('success');
}, 1000);
}

    // 页面加载完成后初始化
    window.addEventListener('load', init);
